<!--
 * @Date: 2022-03-27 15:32:51
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-03-28 15:54:58
 * @FilePath: \vue3Components\src\views\formtest.vue
 * @Description: something
-->
<template>
  <my-form
    ref="form"
    :options="options"
    label-width="100px"
    @on-success="onSuccess"
    @on-change="handleChange"
    @on-exceed="handleExceed"
  >
    <template #uploadArea>
      <el-icon-uploadfilled class="el-icon--upload" style="width: 1em; height: 1em;"></el-icon-uploadfilled>
      <div class="el-upload__text">
        拖入图片或
        <em>点击上传</em>
      </div>
      <!-- <el-button type="primary">点我上传</el-button> -->
    </template>
    <template #uploadTip>
      <div class="el-upload__tip">仅支持jpg/png格式并且不超过500kb</div>
    </template>
    <template #operation="scopeData">
      <el-button type="primary" @click="submitForm(scopeData)">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </template>
  </my-form>
</template>
 <script lang='ts' setup>
import myForm from '@/components/Form/MyForm.vue'
import { FormOptions, Scope } from '../components/Form/type/type'
import { ElMessage } from 'element-plus'
import { ref } from 'vue';

function validateVPhone(value: string) {
  let reg = /^1[3|4|5|7|8]\d{9}$/;
  return !reg.test(value) ? true : false;
}
let validatePhone = (rule: any, value: any, callback: any) => {
  if (value == "") callback(new Error("手机号码不能为空!"));
  else if (validateVPhone(value)) {
    callback(new Error("手机号码格式有误!"));
  } else {
    callback();
  }
};
//绑定数据
let form = ref()
let options: FormOptions[] = [
  {
    type: 'input',
    value: '',
    label: '手机号',
    prop: 'phone',
    placeholder: '请输入手机号',
    rules: [
      {
        required: true,
        message: '用户名不能为空',
        trigger: 'blur'
      },
      //添加自定义规则
      {
        validator: validatePhone,
        trigger: 'blur'
      }
    ],
    attrs: {
      clearable: true
    }
  },
  {
    type: 'input',
    value: '',
    label: '密码',
    prop: 'password',
    placeholder: '请输入密码',
    rules: [
      {
        required: true,
        message: '密码不能为空',
        trigger: 'blur'
      },
      {
        min: 6,
        max: 15,
        message: '密码在6-15位之间',
        trigger: 'blur'
      },

    ],
    attrs: {
      showPassword: true,
      clearable: true
    }
  },
  {
    type: 'select',
    value: '',
    placeholder: '请选择职位',
    prop: 'role',
    label: '职位',
    attrs: {
      style: {
        width: '100%'
      },
    },
    rules: [
      {
        required: true,
        message: '职位不能为空',
        trigger: 'change'
      }
    ],
    children: [
      {
        type: 'option',
        label: '经理',
        value: '1'
      },
      {
        type: 'option',
        label: '主管',
        value: '2'
      },
      {
        type: 'option',
        label: '员工',
        value: '3'
      }
    ]
  },
  {
    type: 'checkbox-group',
    value: [],
    prop: 'like',
    label: '爱好',
    rules: [
      {
        required: true,
        message: '爱好不能为空',
        trigger: 'change'
      }
    ],
    children: [
      {
        type: 'checkbox',
        label: '足球',
        value: '1'
      },
      {
        type: 'checkbox',
        label: '篮球',
        value: '2'
      },
      {
        type: 'checkbox',
        label: '排球',
        value: '3'
      }
    ]
  },
  {
    type: 'radio-group',
    value: '',
    prop: 'gender',
    label: '性别',
    rules: [
      {
        required: true,
        message: '性别不能为空',
        trigger: 'change'
      }
    ],
    children: [
      {
        type: 'radio',
        label: '男',
        value: 'male'
      },
      {
        type: 'radio',
        label: '女',
        value: 'female'
      },
      {
        type: 'radio',
        label: '保密',
        value: 'not'
      }
    ]
  },
  {
    type: 'upload',
    label: '上传',
    prop: 'pic',
    uploadAttrs: {
      action: "https://jsonplaceholder.typicode.com/posts/",
      drag: true,
      multiple: true,
      limit: 3
    },
    rules: [
      {
        required: true,
        message: '图片不能为空',
        trigger: 'blur'
      }
    ],
  },
  {
    type: 'editor',
    value: '',
    prop: 'desc',
    label: '描述',
    placeholder: '请输入描述哈哈哈哈',
    attrs: {
      style: {
        width: '100%'
      }
    },
    rules: [
      {
        required: true,
        message: '描述不能为空',
        trigger: 'blur'
      }
    ]
  }
]
const submitForm = (scopeData: Scope) => {
  scopeData.form.validate((valid) => {
    if (valid) {
      ElMessage.success('提交成功')
      console.log(form.value.getFormData());

    } else {
      ElMessage.error('表单填写有误,请检查')
    }
  })
}
const resetForm = () => {
  form.value.resetFields()
}
const handleSuccess = (val: any) => {
  // console.log(val);
}
const handleChange = (val: any) => {
  // console.log(val);
}
const handleExceed = (val: any) => {
  ElMessage.warning(
    `The limit is 3, you selected ${val.files.length
    } files this time, add up to ${val.files.length + val.uploadFiles.length} totally`
  )
}
const onSuccess = (val: any) => {
  console.log(val);
}
</script>
<style lang='less' scoped>
</style>